<!DOCTYPE html>
<html>
<head>
<title>GPS Demo Application</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>		
<link rel="stylesheet"
	href="./map/jquery.mobile.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript"
	src="./map/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
	src="./map/jquery.mobile.min.js"></script>
<script type="text/javascript" src="./ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="./ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="./ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var selectedSiteAddress;			
			function DoAction(clickedData)
			{
				$.getJSON( 'sites.json', function(data) { 
	                $.each( data.markers, function(i, m) {
						if(clickedData === i)
						{
							selectedSiteAddress = m.add;
			                //alert(clickedData);
						}
				});
	            });
			};
			

			var providedAddress = "";
			$('#basic_map').live("pageshow", function() {
				providedAddress = $('#name1').val() + ' '+ $('#name2').val()+''+' '+$('#name3').val()+' '+$('#name4').val();
				$('#map_canvas_search').gmap('refresh');
			});

			$('#basic_map').live("pagecreate", function() {
				providedAddress = $('#name1').val() + ' '+ $('#name2').val()+''+' '+$('#name3').val()+' '+$('#name4').val();
				
				$('#map_canvas_search').gmap({'center': '59.3426606750, 18.0736160278'}).bind('init', function(evt, map) {
					$('#map_canvas_search').gmap('search', { 'address': ''+providedAddress }, function(results, status) {
					    if ( status === 'OK' ){
					    	$('#map_canvas_search').gmap('get', 'map').panTo(results[0].geometry.location);
					    	
					    	$('#map_canvas_search').gmap('addMarker', {'position': map.getCenter(), 'animation': google.maps.Animation.DROP,'icon':new google.maps.MarkerImage('./map/GreenGMapMarker.png') }).click(function() { 

								$('#map_canvas_search').gmap('openInfoWindow', { 'content': ''+providedAddress}, this);
								
							});
					            $.getJSON( 'sites.json', function(data) { 
					            	$('#twitList').append('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a"></ul>');
				                    listItems = $('#twitList').find('ul');
					                $.each( data.markers, function(i, m) {
					                    $('#map_canvas_search').gmap('addMarker', { 'position': new google.maps.LatLng(m.lat, m.lng), 'animation': google.maps.Animation.DROP  } );
										// Create list at tis time only 
					                        html = '';
					                        html += '<a href="#directions_map" OnClick=\"DoAction('+i+');\"  style="color:black; font-size:12px"><p><u><font  face="arial" color="#3a73ba"><b>'+m.title+ '</b></font></u><br> Address : '+m.add+' <br>Contact No: '+m.contactno+'</p></a>';
					                        //html += '<a href="#" OnClick=\"DoAction('+i+');\" > Click </a>';
					                        listItems.append('<li>'+html+'</li>');
						                });
				                    // Need to refresh list after AJAX call
				                    $('#twitList ul').listview();
				                
					            });
					            $('#map_canvas').gmap('option', 'zoom', 10);
								
					    }else{
							alert("Unable to find location.");
							}
					});
				});
			});


////////////////////////////////////////////////////////////
			
			$('#directions_map').live("pageshow", function() {
				$('#map_canvas_1').gmap('refresh');
				$('#from').val(""+providedAddress);
				$('#to').val(""+selectedSiteAddress);
				});
			
			$('#directions_map').live("pagecreate", function() {
				$('#map_canvas_1').gmap({'center': '59.3426606750, 18.0736160278'});
				$('#submit').click(function() {
					$('#map_canvas_1').gmap('displayDirections', { 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
						if ( status === 'OK' ) {
							$('#results').show();
						} else {
							$('#results').hide();
							alert('Unable to get direction.');
							
						}
					});
					return false;
				});
			});
			
			////////////////////////////////////////////////////////////
			
			
		</script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>GPS Demo Application</h1>
</div>
<div data-role="content">

			<div class="content-primary">
			<form action="#" method="get">
			
			<div data-role="fieldcontain">
	         <label for="name1">Street1 :</label>
	         <input type="text" name="street1" id="name1" value=""  />
			
			<label for="name2">Street2 :</label>
	         <input type="text" name="street2" id="name2" value=""  />
			
			<label for="name3">Post No :</label>
	         <input type="text" name="po" id="name3" value=""  />
			
			<label for="name4">Country :</label>
	         <input type="text" name="country" id="name4" value=""  />
			
			</div>			
			<div><a href="#basic_map" rel="external"
				data-role="button" data-theme="d" id="btn-current-location">Submit</a></div>
			</form>
			</div>
</div>
</div>
<div id="basic_map" data-role="page">
<div data-role="header" data-add-back-btn="true">
<h1>Direction from address provided</h1>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding: 2px;">
<div id="map_canvas_search" style="height: 350px;"></div>
<div id="twitList"></div>
</div>
</div>
</div>
<div id="directions_map" data-role="page">
			<div data-role="header" data-add-back-btn="true">
				<h1>GPS Demo Application</h1>
			</div>
			<div data-role="content">	
				<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
					<div id="map_canvas_1" style="height:300px;"></div>
					<p>
						<label for="from">From</label>
						<input id="from" class="ui-bar-c" type="text" value="noida, India" />
					</p>
					<p>
						<label for="to">To</label>
						<input id="to" class="ui-bar-c" type="text" value="New delhi, India" />
					</p>
					<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
				</div>
				<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
					<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">Results</div>
					<div id="directions"></div>
					<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-bottom ui-btn-up-undefined"></div>
				</div>
			</div>
		</div>
</body>
</html>